<template>
	<!-- 全部商品页面 -->
	<view>
		<view>
		  <view class="header">
		    <view class="header_bt">
		      <view class="header_bt_box">
		        <view class="header_bt_box_zi">
		          <view class="zi_span zi_span_active">综合</view>
		        </view>
		        <view class="header_bt_box_zi">
		            <view class="zi_span">销量</view>
		        </view>
		        <view class="header_bt_box_zi header_bt_box_jia">
		          <view class="zi_span" style="margin-left:-10rpx;">价格</view>
		            <image src="../../static/shang.png" class="shang_img" mode="widthFix"></image>
		            <image src="../../static/xia.png" class="xia_img" mode="widthFix"></image>
		        </view>
		        <view class="header_bt_box_zi shai_imgbox">
		          <view class="zi_span" style="margin-left:-10rpx;;">筛选</view>
		          <image src="../../static/shai.png" class="shai_img" mode="widthFix"></image>
		        </view>
		        <view class="header_bt_box_zi shai_imgbox">
		          <view class="zi_span" style="margin-left:-10rpx;;">分类</view>
		          <image src="../../static/shai.png" class="shai_img2" mode="widthFix"></image>
		        </view>
		      </view>
		    </view>
		  </view>
		</view>
		
		<view class="goods_box" >
			<!-- 商品列表组件 -->
		<goodslist ></goodslist>
		</view>
		
		<!-- 侧边栏 -->
		<fixce></fixce> 
		<!-- 回到顶部start -->
		<view class="top" :style="{'display':(topState===true? 'block':'none')}">
		<image src="../../static/huitop.png" class="huitop"
		@tap="top()">
		</view>
		</image>
			<!-- 回到顶部end-->
	</view>
</template>

<script>
	import fixce from '../../component/fixce.vue';  //侧边栏组件
    import goodslist from '../../component/goodslist.vue';  //商品列表
	export default {
		components:{
		fixce,
		goodslist,
		},
		data() {
			return {
			 topState:false
			}
		},
		onLoad() {

		},
		// 回到顶部start
		onPageScroll(e){ //根据距离顶部距离是否显示回到顶部按钮
		    if(e.scrollTop>200){ //当距离大于200时显示回到顶部按钮
		        this.topState = true
		    }else{ //当距离小于200时关闭回到顶部按钮
		        this.topState = false
		    }
		},
		// 回到顶部end
		methods: {
			top() { //回到顶部  
		　　　　uni.pageScrollTo({ 
		　　　　　　scrollTop: 0, duration: 300 
		　　　　}); 
		　　} 
		}
	}
</script>

<style>
	@import url("../../static/css/good.css");
	.header_bt{
	  width:100%;
	  padding:20rpx 0;
	  border-bottom: 2rpx solid #e7e7e7;
	  border-top: 2rpx solid #e7e7e7;
	  margin-bottom:18rpx;
	}
	.header_bt_box{
	  height:70rpx;
	  width:100%;
	  display: flex;
	justify-content: flex-start;
	align-items: center;
	}
	.header_bt_box_zi{
	height:100%;
	flex:1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #666;
	border-left: 2rpx solid #e7e7e7;
	white-space: nowrap;
	}
	.header_bt_box_zi:nth-child(1){
	  border-left: none;
	}
	.zi_span{
		font-size:28rpx;
		font-weight: 500;
	}
	.zi_span_active{
	      color: #ff80c0;
	}
	.header_bt_box_jia{
	position: relative;
	}
	.shang_img,.xia_img{
	  width:45rpx;
	}
	.shang_img{
	  position: absolute;
	  right: 10rpx;
	  bottom: 25rpx;
	}
	.xia_img{
	      position: absolute;
	      right: 10rpx;
	      bottom:7rpx;
	}
	.shai_imgbox{
	  position: relative;
	}
	.shai_img,.shai_img2{
	  width: 30rpx;
	  position: absolute;
	  right: 13rpx;
	  bottom: 20rpx;
	  z-index:99
	}
</style>
